<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/v2.6.10/vue.min.js"></script>
		<script src="js/v2.6.10/elementui.js"></script>
		<script src="js/v2.6.10/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 搜索框 -->
			<el-row>
				<el-col :span="6"><el-input style="display:inline" v-model="search"
						placeholder="请输入搜索内容"></el-input></el-col>
				&nbsp;
				<el-button @click="searchMeaasge" icon="el-icon-search" type="primary">搜索</el-button>
			</el-row>
			<!-- 展示表格 -->
			<el-table :data="tableData" border style="width: 100%" size="medium">
				<el-table-column prop="id" label="用户id" width="180">
				</el-table-column>
				<el-table-column prop="uname" label="用户名" width="180">
				</el-table-column>
				<el-table-column label="用户密码" width="180">
					<template slot-scope="scope">
						******
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" plain size="small"
							@click="add(scope.$index, scope.row)">新增</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" type="info" plain
							@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="warning" plain @click="handleDelete(scope.row.id)">删除</el-button>
						<el-button size="mini" type="success" plain
							@click="upUserRole(scope.$index, scope.row)">用户角色</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 抽屉 -->
			<el-drawer title="用户角色维护" :visible.sync="drawer" :with-header="true">
				&nbsp;
				<hr />
				<el-link :underline="false">&nbsp;当前用户:{{nowUserId}}</el-link>
				<hr />
				<!-- Tag标签:循环遍历当前用户拥有的角色 -->
				<template v-for="item in userRolesList">
					&nbsp;
					<el-button size="small" @click="deleteUserRole(item.id)" style="margin-bottom: 5px;" type="info"
						plain>{{item.description}}
						<i class="el-icon-remove-outline"></i>
					</el-button>&nbsp;
				</template>
				<hr />
				<el-link :underline="false">&nbsp;所有角色</el-link>
				<hr />
				<!-- 循环展示展示所有的角色 -->
				<template v-for="item in roleList">
					&nbsp;<el-button @click="addUserRole(item.id)" size="small" style="margin-bottom: 5px;" type="success" plain>{{item.description}}
						<i class="el-icon-circle-plus-outline"></i>
					</el-button>&nbsp;
				</template>
			</el-drawer>
			<!-- 增加用户对话框 -->
			<el-dialog title="增加用户" :visible.sync="dialogFormVisibleAdd">
				<el-form :model="formAdd">
					<el-form-item label="用户名" label-width="80px">
						<el-input v-model="formAdd.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户密码" label-width="80px">
						<el-input v-model="formAdd.upwd" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 编辑用户对话框 -->
			<el-dialog title="编辑用户" :visible.sync="dialogFormVisibleEdit">
				<el-form :model="formEdit">
					<el-form-item label="用户名" label-width="80px">
						<el-input v-model="formEdit.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户密码" label-width="80px">
						<el-input v-model="formEdit.upwd" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
					<el-button type="primary" @click="editsubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				search: "", // 搜索内容
				tableData: [], // 表格显示的数据
				dialogFormVisibleAdd: false, // 控制新增对话框的显示与隐藏
				formAdd: { // 新增表单数据
					uname: "",
					upwd: ""
				},
				dialogFormVisibleEdit: false, //控制修改对话框的显示与隐藏
				formEdit: { // 修改表单数据
					uname: "",
					upwd: ""
				},
				drawer: false, // 控制用户角色维护的显示与隐藏
				nowUserId: 0, // 当前操作的用户id
				userRolesList: [], //当前用户拥有的角色集合
				roleList: [], // 展示所有的角色集合
			},
			methods: {
				// 搜索方法
				searchMeaasge() {
					this.initUserData();
				},
				// 新增按钮
				add() {
					this.dialogFormVisibleAdd = true;
				},
				// 新增用户方法
				addsubmit() {
					// 非空判断
					if (this.formAdd.uname == "") {
						this.$message({
							showClose: true,
							message: '警告哦，用户名不能为空!',
							type: 'warning'
						});
					} else if (this.formAdd.upwd == "") {
						this.$message({
							showClose: true,
							message: '警告哦，用户密码不能为空!',
							type: 'warning'
						});
					} else {
						// 调用新增接口
						axios.post(API + "insertUser",
							this.formAdd
						).then((result) => {
							//alert(result.data);
							this.$alert(result.data, '消息提示', {
								confirmButtonText: '确定',
								callback: action => {}
							});
							// 新增成功后,清空输入框
							this.formAdd = {
								uname: "",
								upwd: "",
							};
							this.dialogFormVisibleAdd = false;
							this.initUserData();
						})
					}
				},
				// 编辑按钮
				handleEdit(index, row) {
					this.dialogFormVisibleEdit = true; // 打开修改框
					//修改之前,根据 id从后端获取数据
					let that = this;
					axios.get(API + "selectUserById?id=" + row.id)
						.then(function(res) {
							console.log(res.data.data.roleById);
							that.formEdit.id = res.data.data.user.id;
							that.formEdit.uname = res.data.data.user.uname;
							that.formEdit.upwd = res.data.data.user.upwd;
						}).catch(err => {
							console.log(err);
						});
				},
				//修改提交按钮
				editsubmit() {
					// 调用编辑接口
					axios.post(API + "updateUser",
						this.formEdit
					).then((result) => {
						//alert(result.data);
						this.$alert(result.data, '消息提示', {
							confirmButtonText: '确定',
							callback: action => {}
						});
						// 编辑成功后,清空输入框
						this.formEdit = {
							uname: "",
							upwd: "",
						};
						this.dialogFormVisibleEdit = false;
						this.initUserData();
					})
				},
				// 删除方法
				handleDelete(id) {
					this.$confirm('此操作将删除该数据,是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						center: true,
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						axios.get(API + "deleteUser", {
							params: {
								id: id
							}
						}).then((result) => {
							//alert(result.data);
							this.initUserData();
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 修改用户角色按钮
				upUserRole(i, row) {
					// 设置用户id为当前行点击的用户id
					this.nowUserId = row.id;
					this.drawer = true;
					// 展示用户拥有的角色
					let that = this;
					axios.get(API + "selectRoleByUserId/" + this.nowUserId)
						.then(function(res) {
							console.log(res.data.data.roleLists);
							// 将查询出来的所拥有的角色集合赋值给定义的用户角色集合
							that.userRolesList = res.data.data.roleLists;
						}).catch(err => {
							console.log(err);
						});
				},
				// 获取所有的角色集合
				selectAllRole() {
					// 展示用户拥有的角色
					let that = this;
					axios.get(API + "selectRole")
						.then(function(res) {
							console.log(res.data.data.roleList);
							// 将查询出来的所拥有的角色集合赋值给定义的用户角色集合
							that.roleList = res.data.data.roleList;
						}).catch(err => {
							console.log(err);
						});
				},
				// 根据用户id删除一个角色
				deleteUserRole(roleId) {
					let that = this;
					axios.post(API + "deletebyuseridandroleid", {
						"userId": this.nowUserId,
						"roleId": roleId
					}).then((res)=> {
						that.userRolesList = that.userRolesList.filter(function(obj) {
							return obj.id !== roleId;
						});
						this.$alert("移除成功","消息提示",{
							confirmButtonText:'确定',
							callback:action =>{}
						});
					}).catch(err => {
						console.log(err);
					});
					//alert(this.nowUserId+"==="+roleId);
				},
				// 根据用户id新增一个角色
				addUserRole(roleId) {
				    let that = this;
				    // 判断是否重复添加
				    if (this.userRolesList.some(role => role.id === roleId)) {
				        this.$message({
				            showClose: true,
				            message: '该用户已经拥有此角色!',
				            type: 'warning'
				        });
				        return;
				    }
					// 调用后端接口
				    axios.post(API + "insertByUseridAndRoleId", {
				        "userId": this.nowUserId,
				        "roleId": roleId
				    }).then((res) => {
				        console.log(res);
				        this.$alert(res.data, "消息提示", {
				            confirmButtonText: '确定',
				            callback: action => {}
				        });
				        // 刷新用户角色列表[将刚刚新增的角色追加到显示的地方]
				        this.userRolesList.push(this.roleList.find(role => role.id === roleId));
				    }).catch(err => {
				        console.log(err);
				    });
				},
				// 初始化表格,查询数据
				initUserData() {
					let that = this;
					axios.get(API + "selectUser", {
						params: {
							uName: this.search
						}
					}).then(function(res) {
						console.log(res.data.data.roleList);
						that.tableData = res.data.data.userList;
					}).catch(err => {
						console.log(err);
					});
				}
			},
			mounted() {
				this.initUserData();
				this.selectAllRole();
			}
		})
	</script>
</html>